<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
    #communities_create table td{vertical-align: top; font-size: 12px; padding-left: 10px; padding-top: 10px;}
    #communities_create table td div{color: #a6a6a6;}
    #communities_create input{width: 285px;}
    #communities_create .textareaOnFocusStyle{box-shadow: 0 0 7px 0 #D8D8D8 !important;}
    #communities_create .dateSpanIcon{height: 15px;margin-top: 4px; width: 15px;}
    #community_create_type_input_listbox  .k-state-hover {background-color: #D9D9D9;}
    #communities_create .multiSelectInputStyle{text-indent: 0px;}*/
    #communities_create .k-multiselect-wrap li{height: 17px; line-height: 18px; font-size: 12px; padding: 0px; background-color: #FFFFFF!important; color: #000000}
    #communities_create .k-delete{margin-top: -6px; margin-right: 0px;margin-left: 2px;}
    #communities_create .k-multiselect-wrap input{height: 13px;}
    #communities_create .k-input{border: 1px solid #d8d8d8; padding: 0px; height: 18px;}
    /*kendo upload CSS*/
    #comm_create_select_image .k-button{min-width:0; width:45px; padding:0;margin:0;}
    #comm_create_select_image .k-upload-button{float:right;margin: 0px; min-width: 45px;}
    #comm_create_select_image .k-upload-button span{height:17px; line-height:17px; font-size:9px;}

    #comm_create_select_image .k-upload-files{clear:both; min-height:41px; padding-top:10px; display: none;}
    #comm_create_select_image .k-upload-files li{min-width:42px; max-width:42px; padding:0; border:none; float:left; margin-right:12px; font-size:12px; height:48px;}

    #comm_create_select_image .k-upload-status{left:16px; top:-3px; line-height:0;} 
    #comm_create_select_image .k-upload-status span{background:url("imgs/delete.png") no-repeat;overflow:visible; margin-left: 11px;}

    /*kendo MultiSelect CSS*/
    #comm_create_moderators_div .k-input{border: 0px;text-indent: 0px; height: 16px!important; line-height: 16px!important;}
    #comm_create_members_div .k-input{border: 0px;text-indent: 0px; height: 16px!important; line-height: 16px!important;}
    #communities_create .k-multiselect-wrap li{background-color: #C3C3C3!important; height: 16px; line-height: 16px; width: auto;}
    #communities_create .focusBorder{border: 1px solid #d8d8d8;}
    #communities_create .k-multiselect .k-delete {
        background-position: -161px -82px;
    }
    #communities_win_create_moderators_input_listbox li,
    #communities_win_create_members_input_listbox li{
        border-width: 0px;
    }
    #comm_create_moderators_div .k-button,
    #comm_create_members_div .k-button{
        cursor: default;
    }
    #comm_create_moderators_div .k-delete,
    #comm_create_members_div .k-delete{
        cursor: pointer;
    }
</style>
<script src="js/community.api.js"></script>
<script src="js/multi.select.func.js"></script>
<div id="communities_create">
    <div id="communities_create_body_div" class="wp_mr_15 wp_mb_10">
        <table id="communities_create_table" class="wp_h_360">
            <tr>
                <td rowspan="11" class="wp_w_40" style="padding-left: 15px;">
                    <img id="comm_create_logo" src="imgs/img40.png" class="wp_w_40 wp_h_40" onerror="this.src='imgs/40.png'" src="imgs/40.png" />
                    <button id="communities_create_upload_button" class="k-button wp_w_40 wp_h_20 wp_fz_10 wp_mt_ne4" type="button">Upload</button>
                </td>
                <td class="wp_w_129">Community Name</td>
                <td><input id="communities_create_win_name_input" type="text" class="k-textbox" maxlength=50 /></td>
            </tr>
            <tr>
                <td>Community Nick Name</td>
                <td><input id="communities_create_win_nickname_input" type="text" class="k-textbox" maxlength=50 /></td>
            </tr>
            <tr>
                <td>Community Type</td>
                <td>
                    <input id="community_create_type_input" value="1" maxlength=250 />
                    <div>
                        &lt;  <i>Open</i> - Anyone can view the content; <i>Moderated</i> - Only approved members can view and share content; <i>Restricted</i> - Only invited members can view and share content&gt;
                    </div>
                </td>
            </tr>
            <tr>
                <td>Community Description</td>
                <td>
                    <textarea name="" id="communities_create_win_desc_textarea" rows="3" class="wp_w_283 wp_fz_12" style="resize: none; border: 1px solid #D8D8D8" onfocus="$(this).addClass('textareaOnFocusStyle')" onblur="$(this).removeClass('textareaOnFocusStyle')"></textarea>
                </td>
            </tr>
            <tr>
                <td>Tags</td>
                <td>
                    <input id="communities_create_win_tags_input" type="text" class="wp_w_283" style="color:#333;" maxlength="255" onfocus="$(this).parent().addClass('k-state-focused')" onblur="$(this).parent().removeClass('k-state-focused')" />
                    <div>
                        &lt; Enter multiple tags separated by comma (,) &gt;
                    </div>
                </td>
            </tr>
            <tr>
                <td>Community Date</td>
                <td>
                    <div id="communities_create_win_date_div">
                        <input id="communities_create_win_datepicker_start" class="wp_w_87" maxlength=10 />
                        -&nbsp;
                        <input id="communities_create_win_datepicker_end" class="wp_w_87" maxlength=10 />
                    </div>
                </td>
            </tr>
            <tr style="display:none">
                <td>Community Apps</td>
                <td>
                    <div class="wp_w_273 left">
                        <select id="communities_create_win_apps_select"></select>
                    </div>
                    <a id="comm_create_win_add_apps_a" href="javascript:void(0)">
                        <i class="main_common_h_11_11 right"></i>
                    </a>
                </td>
            </tr>
            <tr>
                <td>Moderators</td>
                <td>
                    <div id="comm_create_moderators_div">
                        <!-- <input id="communities_win_create_moderators_input" type="text" class="k-input" disabled="true" maxlength=250 style="width: 270px;" /> -->
                        <input id="communities_win_create_moderators_input" style="width: 270px;" />
                    </div>
                    <!-- <i id="comm_create_win_sel_moderators" class="main_calendar_r_8_8 wp_mt_3" style="cursor: pointer"></i> -->
                </td>
            </tr>
            <tr>
                <td></td>
                <td style="padding-top: 0px!important;">
                    <div>
                        &lt; Enter User ID or Name &gt;
                    </div>
                </td>
            </tr>
            <tr>
                <td>Members</td>
                <td>
                    <div id="comm_create_members_div">
                        <input id="communities_win_create_members_input" style="width: 270px;" />
                    </div>
                    <!-- <input id="communities_win_create_members_input" type="text" class="k-input" disabled="true" maxlength=250 style="width: 270px;" /> -->
                    <!-- <i id="comm_create_win_sel_members" class="main_calendar_r_8_8 wp_mt_3" style="cursor: pointer"></i> -->
                </td>
            </tr>
            <tr>
                <td></td>
                <td style="padding-top: 0px!important;">
                    <div>
                        &lt; Enter User ID or Name &gt;
                    </div>
                </td>
            </tr>
        </table>
        <button id="comm_create_win_finish_btn" class="k-button wp_w_50 wp_h_20 right wp_fz_11 wp_mt_10 wp_mr_2" type="button">Create</button>
    </div>
</div>
<!-- select community logo -->
<div id="comm_create_select_img_win_body">
    <div id="comm_create_select_image" class="wp_mt_10 wp_ml_15 wp_mr_15">
        <input id="comm_create_select_file_name" type="text" class="wp_fz_12 wp_w_426 left k-textbox" disabled="true" style="position:absolute;"  />
        <input type="file" name="files" id="comm_create_select_file_field" class="wp_fz_12" />
    </div>
    <div class="wp_ml_15 wp_mr_15 wp_h_40 wp_mt_45">
        <img id="comm_create_logo_img" src="" alt="" class="wp_w_40 wp_h_40" style="display:none;">
        <button id="comm_create_upload_btn" class="k-button wp_w_50 wp_h_20 right wp_fz_11 wp_mt_20" type="button">Upload</button>
        <button id="comm_create_cancel_btn" class="btn-bf k-button wp_w_50 wp_h_20 wp_mr_20 right wp_fz_11 wp_mt_20" type="button">Cancel</button>
    </div>
</div>

<script type="text/javascript">
    var communitiesCreateWinFunc = (function () {
        var successCode = ['WP1008'], keyWord = "", moderatorIdsStr, membersIdsStr,  appsDataList, appsDataValues, appsSelect, sWinTitle = "Upload photo",  scrollElement = $('#communities_create_body_div'), commNameInput = $("#communities_create_win_name_input"), tagsInput = $("#communities_create_win_tags_input"), tagsInputKD, 
            communitiesCreateWin = $('#communities_create'), startDatePicker, endDatePicker, newImage, imageFile,
            startDate = $("#communities_create_win_datepicker_start"), endDate = $("#communities_create_win_datepicker_end"),
            typeDDL = $("#community_create_type_input"), selectImgWin, win, moderatorDiv = $("#comm_create_moderators_div"), 
            membersDiv= $("#comm_create_members_div"), moderatorInput, uploadBtn = $("#communities_create_upload_button"), 
            membersInput, moderatorsHtml = moderatorDiv.html(), validator, communitiesData = {apps: "2001"}, 
            membersHtml = membersDiv.html(), descTextarea = $("#communities_create_win_desc_textarea"), 
            imageName = $("#comm_create_select_file_name"), bodyImg = $("#comm_create_select_img_win_body img"),
            nicknameInput = $("#communities_create_win_nickname_input"), moderatorEEObj, moderatorMSObj, membersEEObj, membersMSObj, loaderContent = {position:'center', imgColor:'white', textCSS:{'display': 'block', 'color':'white'},boxCSS:{'background-color':'black','opacity':'1'}}, loader = new Workport.Loader(communitiesCreateWin, loaderContent), browserType = Workport.getBrowser(), logoImg = $("#comm_create_logo_img");

        communitiesCreateWin.kendoWindow({width:'512px', height: '550px', title:'Create a Community', modal: true, visible:false, resizable: false, draggable: false, actions:["Close"], 
            close:function(){
                commNameInput.val("");
                nicknameInput.val("");
                descTextarea.val("");
                $("#communities_create_win_tags_input").val("");
                
                moderatorDiv.unbind("keyup");
                membersDiv.unbind("keyup");
                startDatePicker.close();
                endDatePicker.close();
                $("#comm_create_logo").attr("src", "imgs/img40.png");
                newImage = "";
                imageFile = "";
        }});
        win = communitiesCreateWin.data("kendoWindow");

        $('#comm_create_select_img_win_body').kendoWindow({width:'512px', height: '100px', title: sWinTitle, modal: true, visible:false, draggable: false, actions:["Close"], 
            close:function(){
                imageName.val("");
                bodyImg.attr("src", "");
            }
        });
        selectImgWin = $('#comm_create_select_img_win_body').data("kendoWindow");

        $("#comm_create_select_file_field").kendoUpload({
            localization: {
                select: "Browse"
            },
            select: function(e) {
                var shareWinFileAppointType = ".jpg.jpeg.png.gif.bmp", errMessage;
                //Check the file type
                if (shareWinFileAppointType.indexOf(e.files[0].extension.toLowerCase()) < 0) {
                    Workport.utils.alertMsg(sWinTitle, "The preferred dimension of the Logo : <40*40>. The image type must be of bmp, gif, jpg, jpeg, png", function(_data){});
                    return;
                }
                // Check file size < 2MB
                if (e.files[0].size > (2 * 1024 * 1024)) {
                    Workport.utils.alertMsg(sWinTitle, "The size of the community logo must be within <2048 KB>.", function(_data){});
                    return;
                }
                imageName.val(e.files[0].name);
                if ($(".k-state-focused input:first").is(':hidden')) {
                    $(".k-state-focused input:first").remove();
                }
                if ($("#comm_create_select_image ul li:last").is(':hidden')) {
                    $("#comm_create_select_image ul li:last").remove();
                }
                var fileReader = new FileReader();
                fileReader.readAsDataURL(e.files[0].rawFile);
                fileReader.onload = function(e) {
                    imageFile = e.target.result;
                    bodyImg.attr("src", imageFile);
                }
                logoImg.show();
            }
        });
        $("#comm_create_upload_btn").click(function () {
            if (!imageFile){
                showTooltip("Must upload Community Logo to proceed.", $("#comm_create_select_image span"));
                return;
            }
            newImage = imageFile.replace(/^.*?,/,'');
            $("#comm_create_logo").attr("src", imageFile);
            selectImgWin.close();
        })
        $("#comm_create_cancel_btn").click(function () {selectImgWin.close();})
        uploadBtn.click(function () {
            if(uploadBtn.data('kendoTooltip')){
                uploadBtn.data('kendoTooltip').hide();
            }
            logoImg.hide();
            selectImgWin.center();
            selectImgWin.open();
        });

        // create DropDownList from input HTML element
        typeDDL.kendoDropDownList({
            dataTextField: "text",
            dataSource: [{text: "Open"}, {text: "Moderated"}, {text: "Restricted"}]
        });
        
        //kendo date picker
        startDatePicker = startDate.kendoDatePicker({format: "MM/dd/yyyy"}).data("kendoDatePicker");
        endDatePicker = endDate.kendoDatePicker({format: "MM/dd/yyyy"}).data("kendoDatePicker");
        // startDatePicker = startDate.data("kendoDatePicker");
        // endDatePicker = endDate.data("kendoDatePicker");
        startDate.attr("disabled", true);
        startDate.css("color", '#a6a6a6');
        endDate.attr("disabled", true);
        endDate.css("color", '#a6a6a6');
        //kendo date picker css
        $("#communities_create .k-dropdown-wrap .k-input").css("line-height", "normal");
        if (!$("#communities_create_win_date_div span.k-select span").hasClass("dateSpanIcon")) {
            $("#communities_create_win_date_div span.k-select span").addClass("dateSpanIcon");
        }

        //kendo multi select apps
        $("#communities_create_win_apps_select").kendoMultiSelect({
            dataSource: [],
            change: function (e) {
                var values = this.value(), index;
                if (values.length < appsDataList.length) {
                    for (index = 0; index < appsDataList.length; index++)  {
                        if ($.inArray(appsDataList[index], values) == -1) {
                            appsDataList.splice(index,1);
                        }
                    }
                    if (index == appsDataList.lengh) {
                        appsDataList.splice(index,1);
                    }
                    appsSelect.setDataSource({data: appsDataList });
                }
            }
        });

        // if (!$("div.k-multiselect-wrap").hasClass("multiSelectStyle")) {
        //     $("div.k-multiselect-wrap").addClass("multiSelectStyle");
        //     $("div.k-multiselect-wrap input").addClass("multiSelectInputStyle");
        // }

        appsSelect = $("#communities_create_win_apps_select").data("kendoMultiSelect");

        function showTooltip (errMsg, elem, location) {
            var _location = "right";
            if (location) {_location = location;};
            elem.kendoTooltip({
                content: errMsg,
                position: _location,
                hide: function() {
                    elem.data('kendoTooltip').destroy();
                }
            });
            elem.data('kendoTooltip').show();
        }

        $("#comm_create_win_finish_btn").click(function () {
            var dateVal, tags, errFlag = false, elem, successCode = ["WP1008"], _currentDate = kendo.toString(new Date(), "MM/dd/yyyy"), errMessage;

            loader.show();

            communitiesData.logo = newImage;
            if (!newImage){
                showTooltip("Must upload Community Logo to proceed.", uploadBtn);
                errFlag = true;
            }

            communitiesData.name = commNameInput.val();
            errMessage = "Must enter Alpha-numeric characters only.";
            if (!$.trim(communitiesData.name)) {
                showTooltip("Must enter Community Name to proceed.", commNameInput);
                errFlag = true;
            } else if (community_profile_controller.do_check_input(communitiesData.name, 1)) {
                showTooltip(errMessage, commNameInput);
                errFlag = true;
            } else {
                Workport.CommunityAPI.exist(function (data) {
                    if (data.IsNameAvailableForCreation == false) {
                        showTooltip("A community with this name already exists. Choose different community name.", commNameInput);
                        errFlag = true;
                    }
                }, {name: communitiesData.name, type: 1, sync: true});
            }

            communitiesData.nickname = nicknameInput.val();
            if (!$.trim(communitiesData.nickname)) {
                showTooltip("Must enter Community Nickname to proceed.", nicknameInput);
                errFlag = true;
            } else if (community_profile_controller.do_check_input(communitiesData.nickname, 1)) {
                showTooltip(errMessage, nicknameInput);
                errFlag = true;
            }

            communitiesData.description = descTextarea.val();
            if (!$.trim(communitiesData.description)) {
                showTooltip("Must enter Community Description to proceed.", descTextarea);
                errFlag = true;
            }else if (communitiesData.description.length > 500) {
                showTooltip("Community Description must be within 500 characters.", descTextarea);
                errFlag = true;
            }

            tags = $.trim(tagsInputKD.value());
            if (tags) {
                if (community_profile_controller.do_check_input(tags, 2)) {
                    showTooltip("The allowed characters are Alpha-numeric # @ $ % &.", tagsInput);
                    errFlag = true;
                } else if (tags.length > 255) {
                    showTooltip("Tags must be lesso than <255> characters.", tagsInput);
                    errFlag = true;
                }
            } else {
                showTooltip("Must enter Tags to proceed.", tagsInput);
                errFlag = true;
            }

            dateVal = startDatePicker.value();
            dateVal = new Date(dateVal);
            communitiesData.start = kendo.toString(dateVal, "MM/dd/yyyy");

            dateVal = endDatePicker.value();
            dateVal = new Date(dateVal);
            communitiesData.end = kendo.toString(dateVal, "MM/dd/yyyy");
            if (Date.parse(_currentDate,"MM/dd/yyyy") > Date.parse(communitiesData.start,"MM/dd/yyyy")) {
                showTooltip("Start date must be greater than or equal to current date.", $("span.k-i-calendar.dateSpanIcon").first());
                errFlag = true;
            } else if (Date.parse(communitiesData.start,"MM/dd/yyyy") >= Date.parse(communitiesData.end,"MM/dd/yyyy")) {
                showTooltip("End date must be greater than start date.", $("span.k-i-calendar.dateSpanIcon").last());
                errFlag = true;
            }

            if (!moderatorIdsStr) {
                showTooltip("Community must have at least one Moderator.", moderatorDiv);
                errFlag = true;
            } else if (moderatorIdsStr.length > 250) {
                showTooltip("Moderators id must be less than <250> characters.", moderatorDiv);
                errFlag = true;
            }

            if (membersIdsStr.length > 250) {
                showTooltip("Memebers id must be less than <250> characters.", membersDiv);
                errFlag = true;
            }

            if (errFlag) {loader.hide();return;}

            communitiesData.type = typeDDL.data("kendoDropDownList").text();

            if (tags.substr(tags.length - 1) == ",") {
                tags = tags.substr(0, tags.length - 1);
            }
            communitiesData.tags = tags;
            communitiesData.managers = "";
            if (moderatorIdsStr) {
                communitiesData.managers = moderatorIdsStr
            }
            communitiesData.memebers = "";
            if (membersIdsStr) {
                communitiesData.memebers = membersIdsStr;
            }
            
            Workport.CommunityAPI.create(function (data){
                loader.hide();
                if ($.inArray(data.ResponseCode, successCode) == -1) {
                    Workport.utils.alertMsg("Community Create", data.ResponseMessage, function(_data){});
                } else {
                    Workport.utils.alertMsg("Community Create", "Your community has been created successfully.", function(_data){
                        communities.refresh();
                        headerHtmlFunc.getCommunitys();
                        win.close();
                    });                    
                }
            }, communitiesData);
        });
        
        Workport.TagFunc.setTagsAutoComplete(tagsInput, showLoader, hideLoader);
        tagsInputKD = tagsInput.data('kendoAutoComplete');
        tagsInput.blur(function () {tagsInputKD.close(); Workport.TagFunc.stopSearchTags();});

        $("#comm_create_win_add_apps_a").click(function () {
            appsDataList = [ "Bananas", "Cherries", "aaaaaaaaa", "bbbbb", "cccccccc"];
            appsSelect.setDataSource({data: appsDataList });
            appsSelect.value(appsDataList);
        });

        //kendo MultiSelect moderator
        function getModeratorIdsStr (idsStr) {
            moderatorIdsStr = idsStr;
            var arr = idsStr.split(";"), elem = $($("#communities_win_create_moderators_input_taglist").find("li:last span:last"));
            if (!elem.attr("id")) {
                elem.attr("id", "comm_create_win_moderator_close_icon_" + arr[arr.length - 1]);
            }
        }
        
        function getMemberIdsStr (idsStr) {
            membersIdsStr = idsStr;
            var arr = idsStr.split(";"), elem = $($("#communities_win_create_members_input_taglist").find("li:last span:last"));
            if (!elem.attr("id")) {
                elem.attr("id", "comm_create_win_member_close_icon_" + arr[arr.length - 1]);
            }
        }

        function showLoader () {
            loader.show();
        }

        function hideLoader () {
            loader.hide();
        }

        return {
            open : function (commId) {
                moderatorDiv.html(moderatorsHtml);
                moderatorInput = $("#communities_win_create_moderators_input");
                
                moderatorEEObj = {ids: [], names: [WP_USER_NAME], idsStr: "", idsStrLen: 250};
                moderatorMSObj = {msElem: moderatorInput, msDiv: moderatorDiv}
                Workport.MultiSelectFunc.createMultiSelect(moderatorMSObj, moderatorEEObj, getModeratorIdsStr, showLoader, hideLoader);
                var _ml = moderatorInput.data("kendoMultiSelect");
                _ml.setDataSource([{text: WP_USER_NAME, value: WP_USER_ID}]);
                _ml.value(WP_USER_ID);
                moderatorIdsStr = WP_USER_ID;
                membersIdsStr = "";

                membersDiv.html(membersHtml);
                membersInput = $("#communities_win_create_members_input");
                membersEEObj = {ids: [], names: [], idsStr: "", idsStrLen: 250};
                membersMSObj = {msElem: membersInput, msDiv: membersDiv}
                Workport.MultiSelectFunc.createMultiSelect(membersMSObj, membersEEObj, getMemberIdsStr, showLoader, hideLoader);

                startDatePicker.value(new Date());
                endDatePicker.value(new Date());
                
                typeDDL.data("kendoDropDownList").select(0);

                win.center();
                win.open();
                //add scroll toolbar
                scrollElement.slimScroll({wheelStep: 20, height: '540px', disableFadeOut:true, scrollTo: '0px'});

                $(typeDDL.parent()).attr("id", "community_create_type_dropdownlist_span");
                $(moderatorDiv.find("input.k-input")).attr("id", "community_create_add_moderators_input");
                $(membersDiv.find("input.k-input")).attr("id", "community_create_add_member_input");
                $($("#communities_win_create_moderators_input_taglist").find("li:last span:last")).attr("id", "comm_create_win_moderator_close_icon_" + WP_USER_ID);
                $("#community_create_type_input").prev().find('span:first').attr("id","community_createType_input_open");
                $("#community_create_type_input").prev().attr("id","community_createType_input");
            }
        };
    })();
</script>